<template>
    <div class="style: height: 900px;">
    <!-- <div class="style: height: 600px;"> -->
        <div id="luckysheet"
            style="margin:0px;padding:0px;position:absolute;width:100%;height:800px;left: 0px;top: 55px;bottom:85px;">
            <!-- style="margin:0px;padding:0px;position:absolute;width:100%;height:500px;left: 0px;top: 55px;bottom:85px;"> -->
        </div>
        <el-button @click="getData">获取数据</el-button>
    </div>
</template>
<script>
import sheetData from './js/sheetConfig.js'

import staticSheetData from './js/staticSheetData.js'
import dynamicSheetData from './js/dynamicSheetData.js'

export default {
    name: '',
    props: {
        file: ''
    },
    data() {
        return {
            options: {}
        }
    },
    created() {
        this.options = sheetData.configData
        this.options.data = JSON.parse(JSON.stringify(staticSheetData))
        console.log('this.options.data', this.options.data)
        if (this.file) {
            let _sheetData = JSON.parse(this.file)
            this.options.data.push(..._sheetData)
        } else {
            this.options.data.push(...dynamicSheetData)
        }
    },
    mounted() {
        console.log('data', this.options)
        luckysheet.create(this.options)
    },
    methods: {
        getData() {
            let data = luckysheet.getAllSheets().slice(0, 4)
            console.log('data', data)
            // return data
            // console.log('data-------', luckysheet.getAllSheets())
        }
    }
}
</script>
<style lang="scss" scoped></style>